<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<script src="../jquery.js"></script>
<script src="base.js"></script>
<title>Who Are You</title>
<style type="text/css">
* {
	margin: 0px;
	padding: 0px;
}

body {
	background-color: #EAEFF1;
	word-wrap: break-word;
}

.chat {
	margin: 5px 5px 20px;
}

.content {
	border: 1px solid #BFCDE5;
	height: 300px;
	padding: 10px;
	overflow: scroll;
	overflow-x: hidden;
}

.send {
	border: 1px solid #BFCDE5;
	border-top: none;
}

.input {
	width: 100%;
	height: 50px;
	overflow: scroll;
	overflow-x: hidden;
}

.sendBtn {
	position: relative;
	text-align: right;
	padding-right: 10px;
	padding-bottom: 5px;
}

.text_div {
	margin-top: 10px;
}

.receive_div {
	margin-top: 10px;
}

.head_img {
	width: 30px;
	height: 30px;
	background-size: 100%;
	float: right;
	border-radius: 3px;
}

.content_text {
	float: right;
	border-radius: 10px;
	word-wrap: break-word;
	line-height: 20px;
	padding: 5px 10px;
	margin: 0px 10px 10px;
	background-color: #64B9E4;
	width: auto;
	max-width: 70%;
	min-height: 20px;
	min-width: 40px;
}

.close, .btn {
	cursor: pointer;
	display: inline;
	background-color: #5C7EB2;
	color: white;
	padding: 3px;
	border-radius: 5px;
}

.clear {
	clear: both
}
</style>

</head>
<body>
	<div class="chat">
		<div class="content"></div>
		<div class="send">
			<div class="input" contenteditable="true"></div>
			<div class="sendBtn">
				<div class="close">关闭</div>
				<div class="btn">发送</div>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript">
	var webSocket = null;
	var sender;
	var tryTime = 0;
	var relationId;
	var imgNum = Math.floor(Math.random() * 12 + 1);
	var height = 0;
	$(function() {
		initSocket();
		$(".btn").on(
				"click",
				function() {
					if (isInit) {
						var data = {
							sendId : $.getUrlVar("sendId"),
							imgID : imgNum,
							msg : $(".input").text()
						};
						var text_div = $("<div/>").addClass("text_div")
								.appendTo($(".content"));
						var img = $("<div/>").addClass("head_img").css(
								"background-image",
								"url('img/chat_head/" + imgNum + ".png')")
								.appendTo(text_div);
						var div = $("<div/>").addClass("content_text").css({})
								.text($(".input").text()).appendTo(text_div);
						$("<div/>").addClass("clear").appendTo(text_div);
						height += text_div.height();
						$(".content").scrollTop(height);
						webSocket.send(JSON.stringify(data));
						$(".input").text("");
					}
				})
	});
	function calls() {
		navigator.vibrate = navigator.vibrate || navigator.webkitVibrate
				|| navigator.mozVibrate || navigator.msVibrate;
		navigator.vibrate([ 200, 200, 100, 100 ]);
	}
	var isInit = false;
	function initSocket() {
		if (relationId == null) {
			relationId = new Date().getTime().toString().substring(3)
					+ Math.random().toString().substring(2, 7);
		}
		relationId = $.getUrlVar("id");
		var userCode = "123";
		webSocket = new WebSocket("ws://10.10.40.51:8081/h5Test/websocket.ws/"
				+ relationId + "/" + userCode);
		// 收到服务端消息
		webSocket.onmessage = function(event) {
			var datas = event.data;
			var obj = JSON.parse(datas);
			calls();
			for (var i = 0; i < obj.length; i++) {
				var text_div = $("<div/>").addClass("receive_div").appendTo(
						$(".content"));
				var img = $("<div/>").addClass("head_img").css(
						{
							"background-image" : "url('img/chat_head/"
									+ obj[i].imgID + ".png')",
							"float" : "left"
						}).appendTo(text_div);
				var div = $("<div/>").addClass("content_text").css({
					"float" : "left",
					"background-color" : "#CDD7E2"
				}).text(obj[i].msg).appendTo(text_div);
				$("<div/>").addClass("clear").appendTo(text_div);
				height += text_div.height();
			}
			$(".content").scrollTop(height);
		};
		// 异常
		webSocket.onerror = function(event) {
			console.log("onerror" + event);
		};
		// 建立连接
		webSocket.onopen = function(event) {
			isInit = true;
			console.log("onopen" + event);
		};
		// 断线重连
		webSocket.onclose = function() {
			// 重试10次，每次之间间隔10秒
			if (tryTime < 30) {
				setTimeout(function() {
					webSocket = null;
					tryTime++;
					initSocket();
				}, 2000);
			} else {
				tryTime = 0;
			}
		};
	}
</script>
</html>
